import React, { useEffect, useState } from 'react';
// useLayoutEffect useCallback useMemo useRef 内置钩子
// 自定义hooks 但是必须以use开头
const App = () => {
  // useEffect 副作用钩子
  // 用来代理class中的 生命周期 
  // 将原本放到componentDidMount的代码放到这里
  const [count, setCount] = useState(0)
  const [count2, setCount2] = useState(0)
  // 用法
  useEffect(() => {
    console.log('默认'); // didmount didupdate
  })
  useEffect(() => {
    console.log('只执行一次'); // didmount
  }, []) // []要去监听状态 当监听的状态发生改变时执行  默认执行一次
  useEffect(() => {
    console.log('count2更新了'); // didmount
  }, ]) // []要去监听状态 当监听的状态发生改变时执行  默认执行一次
  return (
    <div>
      <button onClick={() => {
        setCount(count + 1)
      }}>{count}</button>

      <button onClick={() => {
        setCount2(count2 + 1)
      }}>2{count}</button>
    </div>
  );
}

export default App;
